<template>
	<view class="page-container back-grey-light">
		<view>
			<view class="pall-base">
				<text class="grey-light">商品属性(如微辣,中辣,特辣)</text>
			</view>
			<view v-for="(item, index) in attLists" :key="index" class="mb-base">
				<view class="prow-l back-white info-grid bb">
					<text>属性名称</text>
					<view class="row-box right" style="width: 100%;">
						<u-input style="width: 100%;" v-model="item.name" type="name" :maxlength="10" input-align="right" placeholder="请输入属性名称(如辣度,甜度,温度)" placeholder-style="color: #999;font-size: 26rpx;line-height: 40rpx;text-align: right;" />
					</view>
				</view>
				<view class="prow-l pcol-l back-white bb">
					<view class="row-box sb">
						<text>属性选项</text>
						<u-icon name="plus" :color="primaryColor" :size="32" label='添加' label-size="24" label-pos="right"
						:label-color="primaryColor" margin-left="4" @click="openAttrEdit(index)">
						</u-icon>
					</view>
					<view v-if="item.attrItemList.length" class="mt-base" style="display: flex;flex-wrap: wrap;">
						<view v-for="(item2, index2) in item.attrItemList" :key="index2"
							class="radius-l back-grey mr-base" style="padding: 6rpx 20rpx;" @click="removeSingle(index, index2)">
							<text class="s24 mr-10">{{ item2.name }}</text>
							<u-icon name="close" :color="nomarlColor" :size="20">
							</u-icon>
						</view>
					</view>
				</view>
				<view class="prow-l back-white info-grid" @click="removeAttr(index)">
					<u-icon name="trash-fill" :color="redColor" :size="36"
						label='删除' label-size="26" label-pos="right" :label-color="redColor" margin-left="4">
					</u-icon>
				</view>
			</view>
			
		</view>
		
		<!-- 悬浮按钮-添加分类 -->
		<view class="radius-circle back-white add-button" @click="addAttr()">
			<image class="icon" src="../static/新增.png"></image>
		</view>
		
		<!-- 提交按钮 -->
		<view class="back-white submit-button-box" style="padding: 24rpx 0;">
			<view class="submit-button back-primary" @click="submitHandle()">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				attLists: [], // 规格列表
				
			};
		},
		onLoad(options) {
			if (options.attLists) {  // 已有属性
				this.attLists = JSON.parse(options.attLists)
			} else { // 未有属性
				this.attLists.push({
					name: '',
					attrItemList: []
				})
			}
		},
		methods: {
			// 添加属性-空属性
			addAttr() {
				this.attLists.push({
					name: '',
					attrItemList: []
				})
			},
			
			// 删除属性
			removeAttr(index) {
				uni.showModal({
					content: '确定删除该属性？',
					confirmText: '确定',
					confirmColor: this.redColor,
					success: (res) => {
						if (res.confirm) {
							this.attLists.splice(index, 1)
						}
					}
				})
			},
			
			// 打开属性选项输入模态框
			openAttrEdit(index) {
				uni.showModal({
					confirmText: '确定',
					confirmColor: this.primaryColor,
					editable: true,
					placeholderText: '请输入属性选项',
					success: (res) => {
						if (res.confirm) {
							this.attLists[index].attrItemList.push({
								name: res.content
							})
						}
					}
				})
			},
			
			// 删除单个属性
			removeSingle(index, index2) {
				this.attLists[index].attrItemList.splice(index2, 1)
			},
			
			
			// 保存属性
			submitHandle() {
				let flag = 0
				let length = this.attLists.length
				for (var i = 0; i < length; i++) {
					let cur = this.attLists[i]
					if (!cur.name) {
						uni.showToast({
							icon: 'none',
							title: '属性名不能为空！'
						})
						flag = 1
						break
					} else if (!cur.attrItemList.length) {
						uni.showToast({
							icon: 'none',
							title: '属性选项不能为空！'
						})
						flag = 1
						break
					}
				}
				if (flag) return
				const page = getCurrentPages()
				let prePage = page[page.length-2]
				prePage.$vm.attLists = this.deepClone(this.attLists)
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 136rpx;
	}
	
	// 信息项
	.info-grid {
		height: 94rpx;
		display: grid;
		grid-template-columns: 208rpx 1fr;
		align-items: center;
		
		&:last-child {
			display: flex;
			justify-content: center;
			border-bottom: none;
		}
	}
	.bb {
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	// 提交盒子
	.submit-button-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		
	}
	
	// 新增属性按钮
	.add-button {
		position: fixed;
		right: 32rpx;
		bottom: 156rpx;
		z-index: 99;
		.icon {
			display: block;
			width: 73rpx;
			height: 72rpx;
		}
	}
</style>
